<template>
  <div class="message-actions" v-if="enabled && hasContent">
    <div class="tts-controls">
      <button class="tts-button" :class="{ 'playing': isPlaying, 'loading': isLoading }" @click="onClick" :disabled="isLoading">
        <span v-if="isLoading">🔄</span>
        <span v-else-if="isPlaying">⏸️</span>
        <span v-else>🔊</span>
      </button>
      <div class="tts-status" v-if="audioUrl">
        <span v-if="isPlaying">正在播放...</span>
        <span v-else>点击播放语音</span>
      </div>
    </div>

    <div class="voice-controls" v-if="showVoiceSelector">
      <VoiceSelector 
        v-model="selectedVoice" 
        @voice-changed="handleVoiceChange"
        class="voice-selector-compact" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import VoiceSelector from '../../VoiceSelector/index.vue'

const props = defineProps({
  enabled: { type: Boolean, default: true },
  isPlaying: { type: Boolean, default: false },
  showVoiceSelector: { type: Boolean, default: false },
  audioUrl: { type: String, default: '' },
  hasContent: { type: Boolean, default: false },
  currentVoice: { type: String, default: '' }
})

const emit = defineEmits(['play', 'stop', 'voice-change'])

const isLoading = ref(false)
const selectedVoice = ref(props.currentVoice || '')

watch(() => props.currentVoice, (v) => { selectedVoice.value = v || '' })
watch(() => props.isPlaying, (v) => { if (!v) isLoading.value = false })

const onClick = () => {
  if (isLoading.value || !props.enabled) return
  if (props.isPlaying) {
    emit('stop')
  } else {
    isLoading.value = true
    emit('play', () => { isLoading.value = false })
  }
}

const handleVoiceChange = (voiceId) => {
  emit('voice-change', voiceId)
}
</script>

<style scoped>
@import '../index.css';
</style>


